<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-input
        v-model="sitename"
        :clearable="true"
        placeholder="请输入站点名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-input
        v-model="sitenum"
        :clearable="true"
        placeholder="请输入站点编号"
        :style="{ width: '200px' }"
      ></el-input>
      <el-input
        v-model="warnnum"
        placeholder="请输入告警编号"
        :clearable="true"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getwarn">查询</el-button>
    </div>

    <div class="cake_chart clearfix">
      <div class="first_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点区域统计">
        <div id="area" class="first_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="second_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="告警分类统计">
        <div id="type" class="second_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="third_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="告警等级统计">
        <div id="level" class="third_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="fourth_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="告警等级分类统计">
         <div class="timer">
        <div>
          <el-radio-group v-model="radio" fill="#00306F" @change="timeChange">
            <el-radio-button label="年"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="日"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
        <div id="time" class="fourth_cake"></div>
        </dv-border-box-11>
      </div>
    </div>
    
    <div class="table">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="故障告警信息">
      <el-table
        :data="tableData"
        class="customer-table"
        height="40vh"
        :header-cell-style="headClass"
      >
      <template slot="empty">
        <div></div>
      </template>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="siteNo" label="站点编号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="id" label="告警编号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="siteName" label="站点名称" align="center" width="200">
        </el-table-column>
        <el-table-column label="告警位置" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.position == 'warehouse'">电池仓</span>
            <span v-if="scope.row.position == 'cabinet'">充电柜</span>
            <span v-else-if="scope.row.position == 'line'">线槽</span>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="告警通道" align="center" width="80"> </el-table-column>
        <el-table-column prop="alarmTime" label="告警时间" align="center" width="200">
        </el-table-column>
        <el-table-column prop="warnsort" label="告警分类" align="center">
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ warnsort }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item,index) in warnsortlist"
                  :label="item.value"
                  :key="index"
                  :command="item.value"
                  @click.native="typesort(item)"
                >
                  {{ item.value }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">{{ scope.row.category }}</template width="80">
        </el-table-column>
        <el-table-column prop="warning" label="告警详情" align="center">
          <template slot-scope="scope">
            <span
              @click="handle(scope.$index, scope.row)"
              style="cursor: pointer; color: rgba(0, 255, 255, 1)"
              >告警详情</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="warnstatus" label="告警状态" align="center" width="100">
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ warnstatu }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in warnstatulist"
                  :label="item.label"
                  :key="index"
                  :command="item.value"
                  @click.native="statusort(item)"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.alarmStatus == 'warning'">告警中</span>
            <span v-if="scope.row.alarmStatus == 'closed'">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="alarmLevel" label="告警等级" align="center">
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ warngrade }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in warngradelist"
                  :label="item.label"
                  :key="item.index"
                  :command="item.value"
                  @click.native="levelsort(item)"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.alarmLevel == 'zero'">无</span>
            <span v-if="scope.row.alarmLevel == 'one'">一级</span>
            <span v-if="scope.row.alarmLevel == 'two'">二级</span>
            <span v-if="scope.row.alarmLevel == 'three'">三级</span>
          </template>
        </el-table-column>
        <el-table-column prop="initTemp" label="初始温度" align="center" width="80">
        </el-table-column>
        <el-table-column prop="lastTemp" label="最后温度" align="center" width="80">
        </el-table-column>
         <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="EnterOrder(scope.row)"
              >工单</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="Enter3D(scope.row)"
              >三维图</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevclick"
        @next-click="nextclick"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      <div class="asile-echart" v-show="loading">
          <dv-loading></dv-loading>
        </div>
      </dv-border-box-11>
    </div>

    <!-- 告警详情 -->
    <el-dialog
      :title="sitename1"
      :inline="true"
      class="warndetail"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="form"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="告警编号">
          <el-input :value="form.id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input :value="form.workNo" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点名称">
          <el-input :value="form.siteName" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="站点编号">
          <el-input :value="form.siteNo" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="告警分类">
          <el-input :value="form.category" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="告警等级">
          <el-input
            v-if="form.alarmLevel == 'zero'"
            value="无"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="form.alarmLevel == 'one'"
            value="一级"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="form.alarmLevel == 'two'"
            value="二级"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="form.alarmLevel == 'three'"
            value="三级"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="告警区域">
          <el-input
            v-if="form.position == 'warehouse'"
            value="电池仓"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="form.position == 'cabinet'"
            value="充电柜"
            readonly="readonly"
          ></el-input>
          <el-input
            v-if="form.position == 'line'"
            value="线槽"
            readonly="readonly"
          ></el-input>
           <el-input
            v-if="!form.position"
            value=""
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="告警通道">
          <el-input :value="form.channel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="通道温度" v-if="form.category=='升温告警'||form.category=='定温告警'"> 
          <el-input :value="form.lastTemp" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="温差" v-if="form.category=='升温告警'||form.category=='定温告警'">
          <el-input :value="form.differ" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="仓层" v-if="form.category=='升温告警'||form.category=='定温告警'">
          <el-input :value="form.warehouseLevel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="仓层均温" v-if="form.category=='升温告警'||form.category=='定温告警'">
          <el-input :value="form.warehouseAvg" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="仓层升温" v-if="form.category=='升温告警'">
          <span slot="label">
	        	<span class="span-box">
			      <el-tooltip effect="light" content="半分钟电池仓层平均温度升温" placement="bottom">
				    <i class="el-icon-question" style="color: #2bb1f5;"></i>
			      </el-tooltip>
		      	<span>仓层升温</span>
		        </span>
	        </span>
          <el-input :value="form.warehouseHeatUp" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="通道升温" v-if="form.category=='升温告警'">
          <span slot="label">
	        	<span class="span-box">
			      <el-tooltip effect="light" content="半分钟通道最高温度升温" placement="bottom">
				    <i class="el-icon-question" style="color: #2bb1f5;"></i>
			      </el-tooltip>
		      	<span>通道升温</span>
		        </span>
	        </span>
          <el-input :value="form.aisleHeatUp" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="升温差值" v-if="form.category=='升温告警'">
          <span slot="label">
	        	<span class="span-box">
			      <el-tooltip effect="light" content="通道升温-仓层升温" placement="bottom">
				    <i class="el-icon-question" style="color: #2bb1f5;"></i>
			      </el-tooltip>
		      	<span>升温差值</span>
		        </span>
	        </span>
          <el-input :value="form.heatUpDiffer" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" style="margin-right: 2%;">
          <el-input :value="form.createTime" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="告警时间">
          <el-input :value="form.alarmTime" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="初始温度" style="margin-right: 2%;">
          <el-input :value="form.initTemp" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="最后温度">
          <el-input :value="form.lastTemp" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Search from "../../common/select";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  components: {
    Search,
  },
  data() {
    return {
      sitename: "",
      sitenum: "",
      warnnum: "",
      currentPage: 1,
      pagesize: 10,
      total: 0,
      radio: "日",
      timer: "",
      loading: false,
      warnsort: "告警分类",
      warnstatu: "告警状态",
      warngrade: "告警等级",
      warnlevel: "",
      warntype: "",
      warnstatus: "",
      sitename1: "",
      dialogFormVisible: false,
      form: {},
      warnsortlist: [
        {
          value: "网络告警",
        },
        {
          value: "box告警",
        },
        {
          value: "采集程序告警",
        },
        {
          value: "温度告警",
        },
        {
          value: "升温告警",
        },
        {
          value: "定温告警",
        },
      ],
      warnstatulist: [
        {
          label: "告警中",
          value: "warning",
        },
        {
          label: "已关闭",
          value: "closed",
        },
      ],
      warngradelist: [
        {
          label: "无",
          value: "zero",
        },
        {
          label: "一级",
          value: "one",
        },
        {
          label: "二级",
          value: "two",
        },
        {
          label: "三级",
          value: "three",
        },
      ],
      tableData: [],
      $chart1: "",
      $chart2: "",
      $chart3: "",
      $chart4: "",
      message: {},
      chartData: [],
      chartData1: [],
      option1: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "15%",
          bottom: "15%",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#133579",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              interval: "auto",
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(22, 43, 95, 1)",
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: [],
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                width: 30,
                height: 20,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: ["    {d|}", " {a|{c}}     \n", "    {b|}"].join(
                  ","
                ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      },
      option2: {
        backgroundColor: "transparent",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [70, 65],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    if (params.name !== "") {
                      return params.name + params.value;
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: [],
          },
        ],
      },
      option3: {
        backgroundColor: "transparent",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [70, 65],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    if (params.name !== "") {
                      return params.name + params.value;
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: [],
          },
        ],
      },
      option4: {
        backgroundColor: "transparent",
        color: [
          "rgba(39, 130, 205, 1)",
          "rgba(252, 161, 0, 1)",
          "rgba(253, 63, 25, 1)",
        ],
        legend: {
          icon: "circle",
          top: "6%",
          left: "5%",
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#132452",
          textStyle: {
            color: "#fff",
          },
          padding: [10, 10],
        },
        grid: {
          x: 60,
          y: 80,
          x2: 80,
          y2: 60,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              interval: "auto",
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 10,
            },
            boundaryGap: false,
          },
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 0,
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#11366e",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "一级",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
          {
            name: "二级",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
          {
            name: "三级",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
        ],
      },
    };
  },
  watch: {
    currentPage() {
      this.getwarn();
    },
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    headClass() {
      return "background-color: #152f5b;color:#fff;font-weight:bold;";
    },
    //获取告警列表
    getwarn() {
      this.loading = true;
      this.getareawarn();
      this.getwarntype();
      this.getwarnlevel();
      this.getwarntime();
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        alarmLevel: this.warnlevel,
        alarmNo: this.warnnum,
        alarmStatus: this.warnstatus,
        category: this.warntype,
        siteName: this.sitename || "",
        siteNo: this.sitenum || "",
        current: this.currentPage,
        pageSize: this.pagesize,
      };
      this.$http
        .post("/site/alarm/list2", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.total = res.data.b.total;
            this.tableData = res.data.b.records;
          }
          this.loading = false;
        })
        .catch((err) => {});
    },
    //按区域统计告警数据
    getareawarn() {
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        siteName: this.sitename || "",
        siteNo: this.sitenum || "",
        alarmNo: this.warnnum,
      };
      this.$http
        .post("/site/alarm/statistics/province", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            let arealist = [];
            let areacount = [];
            for (let item in res.data.b) {
              arealist.push(item);
              areacount.push(res.data.b[item]);
            }
            this.$chart1.setOption({
              xAxis: [
                {
                  data: arealist,
                },
              ],
              series: [
                {
                  data: areacount,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    //按告警类型统计告警数据
    getwarntype() {
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        siteName: this.sitename || "",
        siteNo: this.sitenum || "",
        alarmNo: this.warnnum,
      };
      this.$http
        .post("/site/alarm/statistics/category", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.chartData = [];
            for (let item in res.data.b) {
              if (res.data.b[item] > 0) {
                let obj = {};
                obj.name = item;
                obj.value = res.data.b[item];
                this.chartData.push(obj);
              }
            }
            var placeHolderStyle = {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            };
            var data = [];
            var total = 0;
            for (var i = 0; i < this.chartData.length; i++) {
              total += this.chartData[i].value;
            }
            for (var i = 0; i < this.chartData.length; i++) {
              data.push(
                {
                  value: this.chartData[i].value,
                  name: this.chartData[i].name,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 30,
                      borderColor: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#7777eb",
                          },
                          {
                            offset: 1,
                            color: "#70ffac",
                          },
                        ]
                      ),
                      shadowColor: "rgba(142, 152, 241, 0.6)",
                    },
                  },
                },
                {
                  value: total / 4,
                  name: "",
                  itemStyle: placeHolderStyle,
                }
              );
            }
            this.$chart2.setOption({
              series: [
                {
                  data: data,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    //按告警级别统计告警数据
    getwarnlevel() {
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        siteName: this.sitename || "",
        siteNo: this.sitenum || "",
        alarmNo: this.warnnum,
      };
      this.$http
        .post("/site/alarm/statistics/level", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.chartData1 = [];
            for (let item in res.data.b) {
              if (res.data.b[item] > 0) {
                let obj = {};
                if (item != "zero") {
                  if (item == "one") {
                    obj.value = res.data.b[item];
                    item = "一级";
                    obj.name = item;
                    this.chartData1.push(obj);
                  }
                  if (item == "two") {
                    obj.value = res.data.b[item];
                    item = "二级";
                    obj.name = item;
                    this.chartData1.push(obj);
                  }
                  if (item == "three") {
                    obj.value = res.data.b[item];
                    item = "三级";
                    obj.name = item;
                    this.chartData1.push(obj);
                  }
                }
              }
            }
            var placeHolderStyle = {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            };
            var data1 = [];
            var total = 0;
            for (var i = 0; i < this.chartData1.length; i++) {
              total += this.chartData1[i].value;
            }
            for (var i = 0; i < this.chartData1.length; i++) {
              data1.push(
                {
                  value: this.chartData1[i].value,
                  name: this.chartData1[i].name,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 30,
                      borderColor: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#7777eb",
                          },
                          {
                            offset: 1,
                            color: "#70ffac",
                          },
                        ]
                      ),
                      shadowColor: "rgba(142, 152, 241, 0.6)",
                    },
                  },
                },
                {
                  value: total / 4,
                  name: "",
                  itemStyle: placeHolderStyle,
                }
              );
            }
            this.$chart3.setOption({
              series: [
                {
                  data: data1,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    //按小时统计最近24小时各个告警级别的告警数据
    getwarntime(time) {
      if (time == "年") {
        this.timer = "year";
      }
      if (time == "月") {
        this.timer = "month";
      }
      if (time == "周") {
        this.timer = "week";
      }
      if (time == "日") {
        this.timer = "day";
      }
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        siteName: this.sitename || "",
        siteNo: this.sitenum || "",
        alarmNo: this.warnnum,
        dateRange: this.timer || "day",
      };
      this.$http
        .post("/site/alarm/statisticsData/category", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            let timelist = [];
            let onelist = [];
            let twolist = [];
            let threelist = [];
            res.data.b.one.map((item) => {
              for (let data in item) {
                timelist.push(data);
                onelist.push(item[data]);
              }
            });
            res.data.b.two.map((item) => {
              for (let data in item) {
                twolist.push(item[data]);
              }
            });
            res.data.b.three.map((item) => {
              for (let data in item) {
                threelist.push(item[data]);
              }
            });
            this.$chart4.setOption({
              xAxis: [
                {
                  data: timelist,
                },
              ],
              series: [
                {
                  data: onelist,
                },
                {
                  data: twolist,
                },
                {
                  data: threelist,
                },
              ],
            });
          }
        })
        .catch((err) => {});
    },
    timeChange(val) {
      this.getwarntime(val);
    },
    handle(index, row) {
      this.dialogFormVisible = true;
      this.sitename1 = row.siteName;
      let params = {
        id: row.id,
      };
      this.$http
        .post("/site/alarm/details", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.form = res.data.b;
          }
        })
        .catch((err) => {});
    },
    EnterOrder(row) {
      this.$router.push({
        path: "/workorder",
        query: {
          siteName: row.siteName,
        },
      });
    },
    Enter3D(row) {
      this.$router.push({
        path: "/standside3d",
        query: {
          siteNo: row.siteNo,
        },
      });
    },
    //饼图初始化
    initbox() {
      this.$chart1 = this.$echarts.init(document.getElementById("area"));
      this.$chart2 = this.$echarts.init(document.getElementById("type"));
      this.$chart3 = this.$echarts.init(document.getElementById("level"));
      this.$chart4 = this.$echarts.init(document.getElementById("time"));
    },
    //饼图渲染
    initcake() {
      this.$chart1.setOption(this.option1);
      this.$chart2.setOption(this.option2);
      this.$chart3.setOption(this.option3);
      this.$chart4.setOption(this.option4);
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    typesort(item) {
      this.warntype = item.value;
      this.warnsort = item.value;
      this.getwarn();
    },
    statusort(item) {
      this.warnstatu = item.label;
      this.warnstatus = item.value;
      this.getwarn();
    },
    levelsort(item) {
      this.warngrade = item.label;
      this.warnlevel = item.value;
      this.getwarn();
    },
  },
  created() {
    this.sitename = this.$route.query.siteName || "";
    this.sitenum = this.$route.query.siteNo || "";
    this.warnnum = this.$route.query.warnnum || "";
  },
  mounted() {
    this.initbox();
    this.initcake();
    this.getwarn();
    var erd = elementResizeDetectorMaker();
    erd.listenTo(
      document.getElementById("area"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("area")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("type"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("type")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("level"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("level")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("time"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("time")).resize();
        });
      }.bind(this)
    );
  },
};
</script>
<style scoped>
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.center > .el-bottom {
  display: inline-block;
}
.first_box,
.second_box,
.third_box {
  width: 23%;
  height: 32vh;
  float: left;
  margin-right: 0.33%;
}
.txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 2px solid #f2f2f2;
  box-sizing: border-box;
}
.fourth_box {
  float: left;
  position: relative;
  width: 30%;
  height: 32vh;
}
.first_cake,
.second_cake,
.third_cake {
  height: 100%;
  width: 100%;
}
.fourth_cake {
  height: 100%;
  width: 100%;
}
.table {
  height: 52vh;
  box-sizing: border-box;
  position: relative;
}
.el-table {
  background: transparent;
  width: 100%;
}
.el-table /deep/ th {
  height: 40px;
  padding: 5px 0 !important;
}
.el-dropdown {
  color: #fff;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.asile-echart {
  left: 0;
  top: 0;
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.warndetail .el-form .el-form-item .el-select {
  display: block;
}
.warndetail .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.warndetail .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.timer {
  height: 40px;
  line-height: 40px;
  position: absolute;
  clear: both;
  top: 10px;
  right: 20px;
  z-index: 1;
  border-radius: 5px;
  padding: 5px;
  color: rgba(184, 222, 255, 1);
}
.timer /deep/ .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
.timer .el-radio-button__inner {
  border: 0;
  color: rgba(184, 222, 255, 1);
  background: transparent;
  box-shadow: none;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>